<template>
  <div class="el-progress-mine">
    <div class="el-progress-cotainer">
      <div class="el-progress-mine-container">
        <div class="el-progress-title" v-if="elProgressTitle">{{elProgressTitle}}:</div>
        <div class="el-progress-bar-mine__outer">
          <div class="el-progress-bar-mine__inner" :style="{width:elProgressSet,backgroundColor: elProgressColor}">
            <div class="el-progress-bar-mine__descInner">{{elProgressInner || 0}}</div>
            <div class="el-progress-bar-mine__descPoint" :style="{color:elProgressColor}">{{elProgressSet}}</div>
          </div>
        </div>
        <div class="el-progress-bar-mine__outer-sum">{{elProgressOuter || 0}}</div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "el-progress-mine",
    props: {
      elProgressTitle: {
        type: String,
        default: ''
      },
      elProgressInner:{
        type: String | Number,
        default: '50'
      },
      elProgressOuter:{
        type: String | Number,
        default: '100'
      },
      elProgress:{
        type: String | Number,
        default: '50.00%'
      },
      elProgressColor:{
        type: String,
        default: ''
      }
    },
    computed:{
      elProgressSet(){
        let elProgressInner = this.elProgressInner || 0
        let elProgressOuter = this.elProgressOuter || 0
        let tempSet = this.elProgress != '50.00%'
          ? this.elProgress
          : (elProgressOuter == 0 ? '0.00%' : `${((elProgressInner/elProgressOuter)*100).toFixed(2)}%`)
        return  tempSet
      }
    }
  }
</script>

<style scoped>
  .el-progress-mine{
    width: 100%;
  }
  .el-progress-cotainer{
    width: 100%;
    display: flex;
    height: 60px;
    padding: 0px 0px 12px 0px;
    align-items: flex-end;
  }
  .el-progress-mine-container{
    height: 18px;
    width: 100%;
    min-width: 180px;
    display: flex;
    font-size: 13px;

  }
  .el-progress-title{
    margin-right: 8px;
  }
  .el-progress-bar-mine__outer{
    flex: 1;
    height: 100%;
    border-radius: 100px;
    background-color: #ebeef5;
    position: relative;
    vertical-align: middle;
  }
  .el-progress-bar-mine__outer-sum{
    margin-left: 8px;
  }
  .el-progress-bar-mine__inner{
    height: 100%;
    border-radius: 100px;
    text-align: center;
    color: #ffffff;
    position: relative;
    max-width: 100%;
  }
  .el-progress-bar-mine__descPoint{
    position: absolute;
    right: -15px;
    top: -20px;
  }
</style>
